// 复选框
.arco-checkbox {
  .arco-icon-hover {
    width: 16px;
    height: 16px;
    &::before {
      background-color: transparent;
    }
  }
  .arco-checkbox-icon {
    width: 16px;
    height: 16px;
    border-width: 1px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    background-color: transparent;
    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
    &::before {
      // display: none;
      content: '';
      position: absolute;
      display: block;
      background-color: #fff;
      width: 0;
      height: 4px;
      transform: scale(0.6, 0.5);
      left: 50%;
      right: 0;
      top: 5px;
      transition: all 0.25s;
    }
    &::after {
      box-sizing: content-box;
      content: '';
      border: 2px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      width: 3px;
      position: absolute;
      top: 2px !important;
      left: 0.3382em;
      transform: rotate(45deg) scaleY(0);
      transition: transform 0.15s ease-in 0.05s;
      transform-origin: center;
      // 替换原有属性
      background: none;
      top: inherit;
      border-radius: 0;
    }
    .arco-checkbox-icon-check {
      display: none !important;
      visibility: hidden;
    }
  }
}

.arco-checkbox-checked {
  .arco-checkbox-icon {
    background-color: rgb(var(--primary-6));
    &::before {
      display: none;
    }
    &::after {
      border-color: #fff;
      transform: rotate(45deg) scaleY(1);
    }
  }
}

.arco-checkbox:hover .arco-checkbox-icon {
  border-color: rgb(var(--primary-6));
}

.arco-checkbox-disabled .arco-checkbox-icon,
.arco-checkbox-disabled:hover .arco-checkbox-icon {
  border-color: var(--color-fill-3);
  background-color: var(--color-fill-2);
}

.arco-checkbox:hover .arco-checkbox-icon-hover:not(.arco-icon-hover-disabled):before,
.arco-checkbox > input[type='checkbox']:focus .arco-checkbox-icon-hover::before {
  background-color: transparent;
}

.arco-checkbox > input[type='checkbox']:focus + .arco-checkbox-icon-hover::before {
  background-color: transparent;
}

.arco-checkbox > input[type='checkbox']:focus + .arco-checkbox-icon {
  border-color: rgb(var(--primary-6)) !important;
}

.arco-checkbox-indeterminate {
  .arco-checkbox-icon {
    background-color: rgb(var(--primary-6));
    border-color: rgb(var(--primary-6));
    &::before {
      content: '';
      position: absolute;
      display: block;
      background-color: #fff;
      width: 100%;
      height: 4px;
      transform: scale(0.6, 0.5);
      left: 0;
      right: 0;
      top: 5px;
    }
    &::after {
      display: none;
    }
  }
}

.arco-checkbox-label {
  line-height: 1;
}
